{{#if this.hasChanges}}
  <form id="publish_form" {{action "publish" on="submit"}} {{did-insert this.didInsert}}>
    {{#if this.model.config.apis.new}}
      <fieldset>
        <legend>{{this.model.config.apis.new.length}} New API Backends</legend>
        <Config::PublishFormRecords @category="apis" @records={{this.model.config.apis.new}} />
      </fieldset>
    {{/if}}

    {{#if this.model.config.website_backends.new}}
      <fieldset>
        <legend>{{this.model.config.website_backends.new.length}} New Website Backends</legend>
        <Config::PublishFormRecords @category="website_backends" @records={{this.model.config.website_backends.new}} />
      </fieldset>
    {{/if}}

    {{#if this.model.config.apis.modified}}
      <fieldset>
        <legend>{{this.model.config.apis.modified.length}} Modified API Backends</legend>
        <Config::PublishFormRecords @category="apis" @records={{this.model.config.apis.modified}} />
      </fieldset>
    {{/if}}

    {{#if this.model.config.website_backends.modified}}
      <fieldset>
        <legend>{{this.model.config.website_backends.modified.length}} Modified Website Backends</legend>
        <Config::PublishFormRecords @category="website_backends" @records={{this.model.config.website_backends.modified}} />
      </fieldset>
    {{/if}}

    {{#if this.model.config.apis.deleted}}
      <fieldset>
        <legend>{{this.model.config.apis.deleted.length}} Deleted API Backends</legend>
        <Config::PublishFormRecords @category="apis" @records={{this.model.config.apis.deleted}} />
      </fieldset>
    {{/if}}

    {{#if this.model.config.website_backends.deleted}}
      <fieldset>
        <legend>{{this.model.config.website_backends.deleted.length}} Deleted Website Backends</legend>
        <Config::PublishFormRecords @category="website_backends" @records={{this.model.config.website_backends.deleted}} />
      </fieldset>
    {{/if}}

    <div class="publish-toggle-checkboxes">
      <a href="#" id="toggle_checkboxes" {{action "toggleAllCheckboxes"}} data-check-all={{t "Check all"}} data-uncheck-all={{t "Uncheck all"}}>{{t "Check all"}}</a>
    </div>

    <div class="text-center">
      <button type="submit" class="btn btn-lg btn-primary publish-button"><span class="btn-label">Publish</span><span class="btn-loading-label"><FaIcon @icon="sync-alt" @spin={{true}} />Publishing...</span></button>
    </div>
  </form>
{{else}}
  <div class="row">
    <div class="col-4 offset-4">
      <div class="alert alert-success text-center">
        <p class="h4">Published configuration is up to date</p>
        <p class="mb-0"><small><em>Recently published changes should be live within a few seconds</em></small></p>
      </div>
    </div>
  </div>
{{/if}}
